<template>
  <div class="addDriver">
    <div class="add-content">
      <!-- 司机信息 -->
      <div class="driver">
        <div class="driver-title">司机信息</div>
        <div class="driver-information">
          <el-form
            ref="driverForm"
            :model="driverOpinionForm"
            :rules="driverOpinionRules"
            label-width="120px"
            style="margin-top: 20px;"
          >
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="电话：" prop="mobile">
                  <el-input
                    v-model="driverOpinionForm.mobile"
                    placeholder="请输入电话号码"
                    style="width: 60%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" />
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="身份证正面：" prop="frontImg">
                  <upload
                    :usage-name="'frontImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证背面：" prop="backImg">
                  <upload
                    :usage-name="'backImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="驾驶证：" prop="drivingLicenseImg">
                  <upload
                    :usage-name="'drivingLicenseImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="从业资格证：" prop="drivingLicenseImg">
                  <upload
                    :usage-name="'employedCertificationImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="姓名：" prop="name">
                  <el-input
                    v-model="driverOpinionForm.name"
                    placeholder="请输入姓名"
                    style="width: 60%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证：" prop="idCard">
                  <el-input
                    v-model="driverOpinionForm.idCard"
                    placeholder="请输入身份证号码"
                    style="width: 60%;"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 车辆信息 -->
      <div class="driver" style="margin-top: 30px;">
        <div class="driver-title">车辆信息</div>
        <div class="driver-information">
          <el-form
            ref="vehicleForm"
            :model="vehicleForm"
            :rules="vehicleRules"
            label-width="120px"
            style="margin-top: 20px;"
          >
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="车头牌号：" prop="licenseNo">
                  <el-input
                    v-model="vehicleForm.licenseNo"
                    placeholder="请输入车头牌号"
                    style="width: 60%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" />
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="行驶证正页：" prop="licenseFirstImg">
                  <upload
                    :usage-name="'licenseFirstImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行驶证副页：" prop="licenseSecondImg">
                  <upload
                    :usage-name="'licenseSecondImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="道路运输证：">
                  <upload
                    :usage-name="'transportLicenseImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车头照片：">
                  <upload
                    :usage-name="'headstockImg'"
                    @handleSucces="handleSucces"
                    @handleError="handleError"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="车辆类型：" prop="typeId">
                  <el-select
                    v-model="vehicleForm.typeId"
                    style="width: 200px; margin-right: 10px; margin-top: -10px"
                    placeholder="请选择车辆类型"
                  >
                    <el-option
                      v-for="(item, index) in carTypeList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车辆长度：" prop="lengthId">
                  <el-select
                    v-model="vehicleForm.lengthId"
                    style="width: 200px; margin-right: 10px; margin-top: -10px"
                    placeholder="请选择车辆长度"
                  >
                    <el-option
                      v-for="(item, index) in carLengthList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="额定载重(吨)：" prop="ratedLoad">
                  <el-input
                    v-model="vehicleForm.ratedLoad"
                    placeholder="请输入额定载重"
                    style="width: 60%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车辆所有人：" prop="owner">
                  <el-input v-model="vehicleForm.owner" placeholder="请输入车辆所有人" style="width: 60%;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否自有车辆：" prop="isSelfCar">

                  <el-select
                    v-model="vehicleForm.isSelfCar"
                    style="width: 200px; margin-right: 10px; margin-top: -10px"
                    placeholder="请选择"
                  >
                    <el-option label="是" :value="true" />
                    <el-option label="否" :value="false" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <span class="dialog-footer">
      <div style="margin-top:15px;">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </span>
  </div>
</template>
<script>
import { driverAdd } from '@/api/tms/driver'
import { getCarLength, getCarType } from '@/api/tms/car'
import { validUserPhone } from '@/utils/validate'
import upload from '../../../components/Upload/index'

export default {
  components: {
    upload
  },
  data() {
    return {
      // 司机信息
      driverOpinionForm: {
        mobile: '',
        frontImg: '',
        backImg: '',
        drivingLicenseImg: '',
        employedCertificationImg: '',
        name: '',
        idCard: ''
      },
      driverOpinionRules: {
        mobile: [{ required: true, message: '请填写电话号码', trigger: 'blur' }],
        frontImg: [{ required: true, message: '请上传身份证正面', trigger: 'blur' }],
        backImg: [{ required: true, message: '请上传身份证背面', trigger: 'blur' }],
        drivingLicenseImg: [{ required: true, message: '请上传驾驶证', trigger: 'blur' }],
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        idCard: [{ required: true, message: '请填写身份证', trigger: 'blur' }]
      },
      // 车辆信息
      vehicleForm: {
        licenseNo: '',
        licenseFirstImg: '',
        licenseSecondImg: '',
        transportLicenseImg: '',
        headstockImg: '',
        ratedLoad: '',
        owner: '',
        typeId: null,
        lengthId: null,
        isSelfCar: null
      },
      vehicleRules: {
        licenseNo: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
        licenseFirstImg: [{ required: true, message: '请上传行驶证正面', trigger: 'blur' }],
        licenseSecondImg: [{ required: true, message: '请上传行驶证背面', trigger: 'blur' }],
        ratedLoad: [{ required: true, message: '请填写额定载重', trigger: 'blur' }],
        owner: [{ required: true, message: '请填写车辆所有人', trigger: 'blur' }],
        isSelfCar: [{ required: true, message: '选择是否自有车辆', trigger: 'blur' }]
      },
      carLengthList: [],
      carTypeList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    cancel() {
      this.$router.go(-1)
    },
    handleSucces(response) {
      // console.log(response)
      switch (response.usageName) {
        case 'frontImg':
        case 'backImg':
        case 'drivingLicenseImg':
        case 'employedCertificationImg':
          this.driverOpinionForm[response.usageName] = response.url
          break
        case 'licenseFirstImg':
        case 'licenseSecondImg':
        case 'transportLicenseImg':
        case 'headstockImg':
          this.vehicleForm[response.usageName] = response.url
          break
      }
    },
    handleError(res) {

    },
    add() {
      this.$refs['driverForm'].validate((valid) => {
        if (valid) {
          this.$refs['vehicleForm'].validate((validV) => {
            if (validV) {
              const data = {
                'mobile': this.driverOpinionForm.mobile,
                'drivingLicenseImg': this.driverOpinionForm.drivingLicenseImg,
                'employedCertificationImg': this.driverOpinionForm.employedCertificationImg,
                'licenseNo': this.vehicleForm.licenseNo,
                'owner': this.vehicleForm.owner,
                'licenseFirstImg': this.vehicleForm.licenseFirstImg,
                'licenseSecondImg': this.vehicleForm.licenseSecondImg,
                'transportLicenseImg': this.vehicleForm.transportLicenseImg,
                'ratedLoad': this.vehicleForm.ratedLoad,
                'id': this.driverOpinionForm.idCard,
                'name': this.driverOpinionForm.name,
                'frontImg': this.driverOpinionForm.frontImg,
                'backImg': this.driverOpinionForm.backImg,
                'headImg': this.vehicleForm.headstockImg,
                'typeId': this.vehicleForm.typeId,
                'lengthId': this.vehicleForm.lengthId,
                'isSelfCar': this.vehicleForm.isSelfCar
              }
              console.log(data)
              if (!validUserPhone(this.driverOpinionForm.mobile)) {
                this.$notify({
                  title: '提醒',
                  message: '请输入正确的手机号',
                  type: 'error',
                  duration: 2000
                })
                return
              }
              driverAdd(data).then(() => {
                this.$notify({
                  title: '成功',
                  message: '添加成功',
                  type: 'success',
                  duration: 2000
                })
                setTimeout(() => {
                  this.$router.go(-1)
                }, 3000)
              })
            }
          })
        }
      })
    },
    getTypeList() {
      getCarType().then(res => {
        this.carTypeList = res
      })
    },
    getCarLengthList() {
      getCarLength().then(res => {
        this.carLengthList = res
      })
    },
    init() {
      this.getTypeList()
      this.getCarLengthList()
    }
  }
}
</script>
<style lang="scss">
.addDriver {
	padding: 50px 0;

	.add-content {
		width: 95%;
		margin: 0 auto;
	}

	.driver-title {
		font-size: 17px;
		height: 30px;
		line-height: 30px;
		width: 10%;
		text-align: center;
		border-left: 3px solid #ff9900;
	}

	.driver-information {
		border: 1px solid #e4e4e4;
		width: 97%;
		margin-top: 10px;
		min-height: 500px;
	}

	.audit-opinion {
		height: 30px;
		line-height: 30px;
		background-color: #ffcc99;
		color: #ff4400;
		text-align: center;
	}

	.dialog-footer {
		width: 97%;
		display: flex;
		justify-content: center;
	}
}
</style>
